<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
    <title>图书类型添加</title>
    <link href="__PUBLIC__/plugins/bootstrap.css" rel="stylesheet">
    <link href="__PUBLIC__/plugins/bootstrap-dashen.css" rel="stylesheet">
    <link href="__PUBLIC__/plugins/font-awesome.css" rel="stylesheet">
    <link href="__PUBLIC__/plugins/animate.css" rel="stylesheet">
    <link href="__PUBLIC__/plugins/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
</head>
<body style="margin-top:70px;">
{include file="common/header" /}
<div class="container">
    <div class="row">
        <div class="col-md-12 wow fadeInUp" data-wow-duration="0.5s">
            <div>
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" ><a href="{:url('BookType/frontlist')}">图书类型列表</a></li>
                    <li role="presentation" class="active"><a href="#bookTypeAdd" aria-controls="bookTypeAdd" role="tab" data-toggle="tab">添加图书类型</a></li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane" id="bookTypeList">
                    </div>
                    <div role="tabpanel" class="tab-pane active" id="bookTypeAdd">
                        <form class="form-horizontal" name="bookTypeAddForm" id="bookTypeAddForm" enctype="multipart/form-data" method="post"  class="mar_t15">
                            <div class="form-group">
                                <label for="bookType_bookTypeName" class="col-md-2 text-right">类别名称:</label>
                                <div class="col-md-8">
                                    <input type="text" id="bookType_bookTypeName" name="bookType_bookTypeName" class="form-control" placeholder="请输入类别名称">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="bookType_days" class="col-md-2 text-right">可借阅天数:</label>
                                <div class="col-md-8">
                                    <input type="text" id="bookType_days" name="bookType_days" class="form-control" placeholder="请输入可借阅天数">
                                </div>
                            </div>
                            <div class="form-group">
                                <span class="col-md-2""></span>
                                <span onclick="ajaxBookTypeAdd();" class="btn btn-primary bottom5 top5">添加</span>
                            </div>
                        </form>
                        <style>#bookTypeAddForm .form-group {margin:10px;}  </style>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{include file="common/footer" /}
<script src="__PUBLIC__/plugins/jquery.min.js"></script>
<script src="__PUBLIC__/plugins/bootstrap.js"></script>
<script src="__PUBLIC__/plugins/wow.min.js"></script>
<script src="__PUBLIC__/plugins/bootstrapvalidator/js/bootstrapValidator.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/plugins/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="__PUBLIC__/plugins/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script>
    //提交添加图书类型信息
    function ajaxBookTypeAdd() {
        //提交之前先验证表单
        $("#bookTypeAddForm").data('bootstrapValidator').validate();
        if(!$("#bookTypeAddForm").data('bootstrapValidator').isValid()){
            return;
        }
        jQuery.ajax({
            type : "post",
            url : "{:url('BookType/frontAdd')}",
            dataType : "json" ,
            data: new FormData($("#bookTypeAddForm")[0]),
            success : function(obj) {
                if(obj.success){
                    alert(obj.message);
                    $("#bookTypeAddForm").find("input").val("");
                    $("#bookTypeAddForm").find("textarea").val("");
                } else {
                    alert(obj.message);
                }
            },
            processData: false,
            contentType: false,
        });
    }
    $(function(){
        /*小屏幕导航点击关闭菜单*/
        $('.navbar-collapse a').click(function(){
            $('.navbar-collapse').collapse('hide');
        });
        new WOW().init();
        //验证图书类型添加表单字段
        $('#bookTypeAddForm').bootstrapValidator({
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                "bookType_bookTypeName": {
                    validators: {
                        notEmpty: {
                            message: "类别名称不能为空",
                        }
                    }
                },
                "bookType_days": {
                    validators: {
                        notEmpty: {
                            message: "可借阅天数不能为空",
                        },
                        integer: {
                            message: "可借阅天数不正确"
                        }
                    }
                },
            }
        });
    })
</script>
</body>
</html>
